<template>
  <el-menu
      :default-active="activeIndex"
      router="true"
      class="option-section"
      mode="horizontal"
      background-color="#FAFCFF"
      active-text-color="#9c0000ff"
      @select="handleSelect"
  >
    <el-menu-item index="individual" class="option-list">
      <div class="option-item">
        <!--             这里option-svg设置option模块每一个svg的统一样式，而后面的第二个并列的类名，为设置每个svg的图片-->
        <div class="option-svg individual-svg"></div>
        <div class="option-text individual-text">个人中心</div>
      </div>
    </el-menu-item>

    <el-menu-item index="activity" class="option-list">
      <div class="option-item">
        <div class="option-svg activity-svg"></div>
        <div class="option-text activity-text">我的活动</div>
      </div>
    </el-menu-item>

    <el-menu-item index="collect" class="option-list">
      <div class="option-item">
        <div class="option-svg collect-3-svg"></div>
        <div class="option-text collect-3-text">我的收藏</div>
      </div>
    </el-menu-item>

    <el-menu-item index="report" class="option-list">
      <div class="option-item">
        <div class="option-svg report-svg"></div>
        <div class="option-text report-text">思想汇报</div>
      </div>
    </el-menu-item>

    <el-menu-item index="locus" class="option-list">
      <div class="option-item">
        <div class="option-svg locus-svg"></div>
        <div class="option-text locus-text">成长轨迹</div>
      </div>
    </el-menu-item>

    <el-menu-item index="due" class="option-list">
      <div class="option-item">
        <div class="option-svg money-svg"></div>
        <div class="option-text money-text">党费缴纳</div>
      </div>
    </el-menu-item>

    <el-menu-item index="empty" class="option-list">
      <div class="option-item">
        <div class="option-svg money-svg"></div>
        <div class="option-text money-text">暂无</div>
      </div>
    </el-menu-item>

  </el-menu>



</template>

<script setup>

import {ref} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()


const activeIndex = ref(route.path.substring(1))
</script>

<style scoped>
/*六个选项模块*/
.option-section {
  width: 100%;
  height: 7.5rem;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 5px 5px;
  /*overflow: hidden;*/
}

.option-module {
  height: 100%;
  display: flex;
}

.option-list {
  list-style: none;
  width: 18rem;
  /*background-color: red;*/
  height: 100%;
  cursor: pointer;
  position: relative;
  --el-menu-hover-text-color:#303133
}

.option-1 {
  border-bottom: 5px solid rgba(156, 0, 0, 1);
}

.option-item {
  display: flex;
  justify-content: center;
}

.option-svg {
  width: 2.3rem;
  height: 2.3rem;
  /*position: absolute;*/
  /*top:45%;*/
  background-size: 2.3rem 2.3rem;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2.6rem;
  margin-right: 1rem;
}

.option-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 7.5rem;
}

</style>
